<template>
  <div>
    <div class="cities" v-for="(item, index) in getLists" :key="index">
      <div class="initials">
        {{ index }}
        <span style="font-size:12px;color:#999999" v-if="index === 'A'">
          (按字母排序)</span
        >
      </div>
      <ul class="cityul">
        <li
          v-for="item2 in item"
          :key="item2.id"
          @click="toCity({ id: item2.id, name: item2.name })"
        >
          {{ item2.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["allCity"],
  components: {},
  data() {
    return {};
  },
  methods: {
    toCity(e) {
      this.$router.push("/city?id=" + e.id);
      this.$store.state.nowCity = e;
    },
  },
  computed: {
    getLists: function() {
      let cityList = {};
      for (let i = 65; i <= 90; i++) {
        let num = String.fromCharCode(i);
        cityList[num] = this.allCity[num];
      }
      return cityList;
    },
  },
};
</script>

<style scoped lang="css">
.cities {
  margin-top: 0.625rem;
  background-color: white;
}
.initials {
  border-bottom: 1px solid #e5e5e5;
  height: 1.875rem;
  line-height: 1.875rem;
  padding-left: 0.625rem;
  font-size: 0.8125rem;
}
.cityul {
  display: flex;
  list-style: none;
  flex-flow: wrap;
}
.cityul li {
  line-height: 2.375rem;
  text-align: center;
  width: 24.7%;
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  height: 2.375rem;
  font-size: 0.875rem;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
